<template>
		<div>
			<select  :name="firCate" v-on:change="cateChange(1,$event)" class="input-medium">
				<option v-for="item in firCateList" :key="item.categoryId" v-bind:value="item.categoryId" >{{item.categoryName}}</option>
			</select>
			
			<select  :name="secCate" v-on:change="cateChange(2,$event)"  class="input-medium">
				<option v-for="item in secCateList" :key="item.categoryId" v-bind:value="item.categoryId" >{{item.categoryName}}</option>
			</select>
			
			<select :name="thrCate"  class="input-medium">
				<option v-for="item in thrCateList" :key="item.categoryId" v-bind:value="item.categoryId" >{{item.categoryName}}</option>
			</select>
		</div>
</template>


<script>
	var  lazyInfo={
			"":[{"categoryId":"","categoryName":"-请选择-"}]
			};


	function fetchChildByParentId(parentId,cateLevel,obj,callback){
		var lazyCate=lazyInfo[parentId];
		if(lazyCate){
			callback.call(obj,lazyCate);
		}

		var params={"filter":"true","ctgType":cateLevel,"categoryId":parentId};
		$.ajax({
			"url":"/common/category/getCtg",
			 data:params,
			 type:"post",
			 dataType:"json",
			 success:function(data){
			 	if(!data){
			 		data=[];
			 	}
			 	data.unshift({"categoryId":"","categoryName":"-请选择-"});
			 	lazyCate=data;
			 	lazyInfo[parentId]=lazyCate;
			 	callback.call(obj,lazyCate);
			 }
		});

	}


	module.exports={
		name:"Category",
		props:{
			  firCate: {  // 必须提供字段
			    default: "firCate",
			    required: true,
			    type: String
			  },
			  secCate: { 
			    default: "secCate",
   			    required: true,
   			    type: String
			  },
			  thrCate: { 
			    default: "thrCate",
   			    required: true,
   			    type: String
			  }
		},
		data:function(){
			return {
					"firCateList": [{"categoryId":"","categoryName":"-请选择-"}],
					"secCateList": [{"categoryId":"","categoryName":"-请选择-"}],
					"thrCateList": [{"categoryId":"","categoryName":"-请选择-"}]
				   };
		},
		created:function(){
			//获取一级分类信息
			fetchChildByParentId(0,0,this,function(data){
				this.firCateList=data;
			});
		},
		methods:{
			"cateChange":function(index,event){
				var val=event.target.value;
				var _this=this;
				fetchChildByParentId(val,index,this,function(cateInfo){
					if(index==1){
						_this.secCateList=cateInfo;	
						_this.thrCateList=[{"categoryId":"","categoryName":"-请选择-"}];
					}else if(index==2){
						_this.thrCateList=cateInfo;	
					}
				});

			}
		}
	}

</script>